<!-- 操作员汇总 -->
<template>
  <div class="cost-configuration">
    <!-- 查询 -->
    <el-form label-width="80px" :model="formData" size="mini" :inline="true" class="demo-form-inline">
      <el-row :gutter="15">
        <el-col :span="16">
          <el-form-item>
            <el-date-picker
              v-model="formData.startTime"
              class="time-small"
              align="right"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="开始时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="formData.endTime"
              class="time-small"
              align="right"
              type="date"
              @change="myChange"
              value-format="yyyy-MM-dd"
              placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
          <el-select size="mini" filterable v-model="formData.operatorId" @visible-change="selectMan" @change="myChange" placeholder="操作员选择">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="item in salesmanList" :key="item.id" :label="item.fullName" :value="item.salesmanId"></el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <div style="display: flex; justify-content: flex-end; height: 29px;">
            <el-form-item>
              <el-input v-model="formData.searchMent" clearable @keyup.enter.native="searchSales()"></el-input>
            </el-form-item>
            <el-button type="primary" size="mini" @click="searchSales()">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <!-- 表格 -->
    <el-table
      border
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
      :data="tableData"
      :span-method="objectSpanMethod"
      style="width: 100%">
      <el-table-column
        align="center"
        label="操作员">
        <template slot-scope="scope">
          {{scope.row.fullName}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="船代">
        <template slot-scope="scope">
          {{scope.row.shipAgencyName}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="箱量">
        <template slot-scope="scope">
          {{scope.row.num}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="箱量合计">
        <template slot-scope="scope">
          {{scope.row.totalCount}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  operatorSummary
} from './api/finance'
import {
  getSalesman
} from '../userMan/api/userman.js'
export default {
  data () {
    return {
      tableData: [],
      formData: {
        operatorId: '',
        startTime: '',
        endTime: '',
        searchMent: ''
      },
      pos: 0,
      spanArr: [],
      myObj: {},
      loading: true,
      salesmanList: []
    }
  },
  mounted () {
    this.getSalesmanList()
    this.getOperatorSummary()
  },
  methods: {
    // 操作员汇总
    async getOperatorSummary () {
      this.loading = true
      if (this.formData.mydate === null) {
        this.formData.mydate = ['', '']
      }
      const res = await operatorSummary({
        operatorId: this.formData.operatorId,
        startTime: this.formData.startTime || '',
        endTime: this.formData.endTime || ''
      })
      if (res.status === 200) {
        this.tableData = res.data
        this.tableHebing(this.tableData)
        this.loading = false
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        this.loading = false
      }
    },
    // 表格合并
    tableHebing (data) {
      this.spanArr = []
      this.pos = 0
      data.map((item, index) => {
        if (index === 0) {
          this.spanArr.push(1)
        } else {
          if (data[index].fullName === data[index - 1].fullName) {
            // 如果fullName相等就累加，并且push 0
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            // 不相等push 1
            this.spanArr.push(1)
            this.pos = index
          }
        }
      })
    },
    myChange () {
      this.getOperatorSummary()
    },
    // 获取业务员列表
    async getSalesmanList () {
      const res = await getSalesman({
        nickName: '',
        state: '',
        userType: 8,
        page: 1,
        num: 10000
      })
      if (res.status === 200) {
        this.salesmanList = res.data
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]
        return {
          rowspan: _row,
          colspan: 1
        }
      }
      if (columnIndex === 3) {
        const _row = this.spanArr[rowIndex]
        return {
          rowspan: _row,
          colspan: 1
        }
      }
    },
    selectMan (value) {
      let _that = this
      if (value) {
        setTimeout(function () {
          _that.getSalesmanList()
        }, 500)
      }
    },
    // 搜索
    searchSales () {
      let search = this.formData.searchMent.toUpperCase()
      let arr = []
      if (search === '') {
        this.getOperatorSummary()
        return false
      }
      this.tableData.map(item => {
        for (let key in item) {
          if (item[key].indexOf(search) !== -1) {
            arr.push(item)
          }
        }
      })
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i] === arr[j]) {
            arr.splice(j, 1)
            j--
          }
        }
      }
      this.tableData = []
      this.tableData = arr
      this.tableHebing(this.tableData)
    }
  }
}
</script>

<style lang="less">
</style>
